<template>
  <div class="sidebar-container">
    <!-- 顶部Logo区域 -->
    <div class="sidebar-logo">
      <div class="logo-wrapper">
        <img src="../assets/images/logo.png" alt="Logo" class="logo-img"/>
        <!--        <span class="logo-text">FlameWing CodeForge</span>-->
      </div>
    </div>

    <!-- 导航菜单 -->
    <div class="menu-scroll-container">
      <div class="menu-outer-container">
        <el-menu
            :default-active="activeIndex"
            class="sidebar-menu"
            :router="true"
            active-text-color="#409EFF"
            background-color="#304156"
            text-color="#b8c7ce"
            :collapse="isCollapse"
        >
          <!-- 我的项目 -->
          <el-sub-menu index="my-projects">
            <template #title>
              <el-icon>
                <Folder/>
              </el-icon>
              <span>我的项目</span>
            </template>
            <!-- 爱心页面 -->
            <el-menu-item index="/love-heart" route="/love-heart" class="gomoku-menu-item">
              <el-icon class="dynamic-icon">
                <svg viewBox="0 0 1024 1024" width="200" height="200">
                  <!-- 水平分隔线 -->
                  <path
                      d="M5.1 831.1h253.5c2.8 0 5.1-2.3 5.1-5.1s-2.3-5.1-5.1-5.1H5.1c-2.8 0-5.1 2.3-5.1 5.1 0 2.9 2.3 5.1 5.1 5.1z m314.3 0h55.8c2.8 0 5.1-2.3 5.1-5.1s-2.3-5.1-5.1-5.1h-55.8c-2.8 0-5.1 2.3-5.1 5.1 0.1 2.9 2.3 5.1 5.1 5.1z m106.5 0h253.5c2.8 0 5.1-2.3 5.1-5.1s-2.3-5.1-5.1-5.1H425.9c-2.8 0-5.1 2.3-5.1 5.1 0 2.9 2.3 5.1 5.1 5.1z m314.4 0H796c2.8 0 5.1-2.3 5.1-5.1s-2.3-5.1-5.1-5.1h-55.8c-2.8 0-5.1 2.3-5.1 5.1 0.1 2.9 2.4 5.1 5.2 5.1z m106.4 0h172.4c2.8 0 5.1-2.3 5.1-5.1s-2.3-5.1-5.1-5.1H846.7c-2.8 0-5.1 2.3-5.1 5.1 0.1 2.9 2.3 5.1 5.1 5.1z"
                      fill="#3B0404"/>

                  <!-- 主图形部分 -->
                  <path
                      d="M409.6 803.5H86.9c-14 0-25.4-11.4-25.4-25.4 0-14 11.4-25.4 25.4-25.4h118.2c-10.1-3.4-17.3-12.9-17.3-24 0-10.9 6.8-20.1 16.4-23.7h-73.9c-14 0-25.4-11.4-25.4-25.4 0-14 11.4-25.4 25.4-25.4h130.1l-40.8-40.8-1.8-1.8c-88.1-88.1-88.1-231 0-319.1s231-88.1 319.1 0l1.8 1.8 1.8-1.8c88.1-88.1 231-88.1 319.1 0 88.1 88.1 88.1 231 0 319.1l-1.8 1.8L560.2 911c-11.9 11.9-31.1 11.9-43 0L409.6 803.5zM54.5 753.1c-14 0-25.4-11.4-25.4-25.4 0-14 11.4-25.4 25.4-25.4s25.4 11.4 25.4 25.4c0 14.1-11.4 25.4-25.4 25.4z"
                      fill="#FF5E5E"/>

                  <!-- 内部装饰元素 -->
                  <path
                      d="M668.1 228.8c67.9-9.7 139.3 11.6 191.5 63.8 88.1 88.1 88.1 231 0 319.1l-1.8 1.8L560.2 911c-11.9 11.9-31.1 11.9-43 0l-5.1-5.1 291.3-291.4 1.8-1.8c88.1-88.1 88.1-231 0-319.1-38.3-38.2-87-59.9-137.1-64.8z"
                      fill="#CB2828"/>

                  <!-- 细节装饰元素 -->
                  <path
                      d="M196 633.3c2 2 2 5.2 0 7.2s-5.2 2-7.2 0L165.3 617l-1-1-0.3-0.3-0.5-0.5c-54.3-54.3-77.4-130.8-63.8-204.9 0.5-2.8 3.1-4.6 5.9-4.1 2.8 0.5 4.6 3.1 4.1 5.9-13 70.9 9.1 144 61 195.9l0.5 0.5 0.3 0.3 1.1 1.1 23.4 23.4z"
                      fill="#3B0404"/>

                  <!-- 圆形装饰元素 -->
                  <path
                      d="M494.3 514.2c-8.4 0-15.2-6.8-15.2-15.2s6.8-15.2 15.2-15.2c8.4 0 15.2 6.8 15.2 15.2s-6.8 15.2-15.2 15.2z m91.3 0c-8.4 0-15.2-6.8-15.2-15.2s6.8-15.2 15.2-15.2 15.2 6.8 15.2 15.2-6.8 15.2-15.2 15.2z"
                      fill="#3B0404"/>

                  <!-- 大圆形装饰 -->
                  <path
                      d="M332.1 483.8c-30.8 0-55.8-25-55.8-55.8s25-55.8 55.8-55.8 55.8 25 55.8 55.8-25 55.8-55.8 55.8z m415.8 0c-30.8 0-55.8-25-55.8-55.8s25-55.8 55.8-55.8 55.8 25 55.8 55.8-25 55.8-55.8 55.8z"
                      fill="#F54040"/>

                  <!-- 顶部装饰元素 -->
                  <path
                      d="M871.4 125.7v-0.3c0-14.9 12.1-26.9 26.9-26.9s26.9 12.1 26.9 26.9V160.6c0 10.5-8.5 19-19 19H871c-14.9 0-26.9-12.1-26.9-26.9s12.1-26.9 26.9-26.9c0.2-0.1 0.3-0.1 0.4-0.1z"
                      fill="#FF5E5E"/>
                </svg>
              </el-icon>
              <template #title>
                <span>爱心特效</span>
                <el-tag size="small" effect="dark" type="danger" class="menu-tag">New</el-tag>
              </template>
            </el-menu-item>

            <!-- 五子棋 -->
            <el-menu-item
                index="/gomoku-game"
                route="/gomoku-game"
                class="gomoku-menu-item"
            >
              <el-icon class="dynamic-icon">
                <svg viewBox="0 0 1024 1024" width="200" height="200">
                  <path d="M76.8 76.8h870.4v870.4H76.8z" fill="#FFDD50"/>
                  <path
                      d="M559.97952 312.51968a150.86592 150.73792 0 1 0 301.73184 0 150.86592 150.73792 0 1 0-301.73184 0Z"
                      fill="currentColor"/>
                  <path
                      d="M161.3312 710.8352a150.86592 150.73792 0 1 0 301.73184 0 150.86592 150.73792 0 1 0-301.73184 0Z"
                      fill="currentColor"/>
                  <path
                      d="M942.05952 330.4448H81.94048c-9.9072 0-17.94048-8.02304-17.94048-17.92512s8.03328-17.92512 17.94048-17.92512h860.11904c9.9072 0 17.94048 8.02304 17.94048 17.92512s-8.03328 17.92512-17.94048 17.92512z"
                      fill="currentColor"/>
                  <path
                      d="M312.19712 960a17.93536 17.93536 0 0 1-17.94048-17.92512V81.92512a17.93024 17.93024 0 0 1 17.94048-17.92512 17.93024 17.93024 0 0 1 17.94048 17.92512v860.14976a17.93536 17.93536 0 0 1-17.94048 17.92512z"
                      fill="currentColor"/>
                  <path
                      d="M942.05952 728.76032H81.94048c-9.9072 0-17.94048-8.02816-17.94048-17.92512s8.03328-17.92512 17.94048-17.92512h860.11904c9.9072 0 17.94048 8.02816 17.94048 17.92512s-8.03328 17.92512-17.94048 17.92512z"
                      fill="currentColor"/>
                  <path
                      d="M710.84544 960a17.93536 17.93536 0 0 1-17.94048-17.92512V81.92512c0-9.90208 8.03328-17.92512 17.94048-17.92512s17.94048 8.02304 17.94048 17.92512v860.14976a17.94048 17.94048 0 0 1-17.94048 17.92512z"
                      fill="currentColor"/>
                  <path
                      d="M179.80416 312.51968a132.39296 132.28032 0 1 0 264.78592 0 132.39296 132.28032 0 1 0-264.78592 0Z"
                      fill="#FFFFFF"/>
                  <path
                      d="M312.19712 197.632c63.40096 0 114.98496 51.53792 114.98496 114.88768s-51.584 114.8928-114.98496 114.8928-114.99008-51.54304-114.99008-114.8928S248.79104 197.632 312.19712 197.632m0-35.85024c-83.31776 0-150.86592 67.48672-150.86592 150.73792 0 83.2512 67.54304 150.73792 150.86592 150.73792 83.31776 0 150.86592-67.48672 150.86592-150.73792-0.00512-83.2512-67.54816-150.73792-150.86592-150.73792z"
                      fill="currentColor"/>
                  <path d="M578.67264 710.8352a132.1728 132.06528 0 1 0 264.3456 0 132.1728 132.06528 0 1 0-264.3456 0Z"
                        fill="#FFFFFF"/>
                  <path
                      d="M710.84544 595.94752c63.40096 0 114.98496 51.53792 114.98496 114.88768s-51.584 114.88768-114.98496 114.88768c-63.40608 0-114.98496-51.53792-114.98496-114.88768s51.57888-114.88768 114.98496-114.88768m0-35.85024c-83.31776 0-150.86592 67.48672-150.86592 150.73792 0 83.2512 67.54304 150.73792 150.86592 150.73792s150.86592-67.48672 150.86592-150.73792c-0.00512-83.2512-67.54816-150.73792-150.86592-150.73792z"
                      fill="currentColor"/>
                </svg>
              </el-icon>
              <template #title>
                <span>五子棋</span>
                <el-tag size="small" effect="dark" type="info" class="menu-tag">策略</el-tag>
              </template>
            </el-menu-item>

            <!-- 中国象棋 -->
            <el-menu-item
                index="/chinese-chess"
                route="/chinese-chess"
                class="gomoku-menu-item"
            >
              <el-icon class="dynamic-icon">
                <svg viewBox="0 0 1024 1024" width="200" height="200">
                  <path d="M0 51.2h972.8v972.8H0z" fill="#FFFFFF" fill-opacity="0"/>
                  <path
                      d="M512 51.2c-254.976 0-460.8 205.824-460.8 460.8s205.824 460.8 460.8 460.8 460.8-205.824 460.8-460.8-205.824-460.8-460.8-460.8z m0 870.912c-225.792 0-410.112-184.32-410.112-410.112S286.208 101.888 512 101.888s410.112 184.32 410.112 410.112-184.32 410.112-410.112 410.112z"
                      fill="#FEDE80"/>
                  <path
                      d="M512 117.248c-218.112 0-394.752 176.64-394.752 394.752s176.64 394.752 394.752 394.752 394.752-176.64 394.752-394.752S730.112 117.248 512 117.248z"
                      fill="#FF8934"/>
                  <path
                      d="M760.832 671.744c-15.36 13.824-30.72 27.648-39.936 46.08-6.144 13.824-13.824 16.896-24.576 10.752-61.44-24.576-101.376-81.408-122.88-168.96-9.216 0-13.824 0-18.432 1.536 15.36 29.184 24.576 69.12 23.04 121.344 0 50.688-30.72 81.408-90.624 90.624-19.968 4.608-32.256 0-32.256-13.824-1.536-19.968-13.824-33.792-38.4-39.936-13.824-3.072-16.896-7.68-13.824-13.824 0-4.608 6.144-6.144 18.432-6.144 52.224 4.608 78.336-7.68 75.264-35.328v-13.824c-47.616 32.256-124.416 62.976-227.328 92.16-7.68 0-12.288-1.536-13.824-4.608-1.536-3.072 1.536-6.144 9.216-9.216 96.768-53.76 172.032-105.984 221.184-156.672v1.536c-67.584 53.76-133.632 89.088-201.216 101.376-7.68 1.536-12.288 1.536-13.824 0 0-3.072 3.072-6.144 9.216-10.752 56.832-38.4 107.52-79.872 148.992-127.488-32.256 16.896-81.408 35.328-148.992 52.224-9.216 3.072-13.824 1.536-13.824-1.536s3.072-6.144 10.752-10.752c62.976-33.792 110.592-67.584 144.384-104.448h-27.648v10.752c0 12.288-6.144 18.432-15.36 23.04-13.824 4.608-26.112 6.144-41.472 6.144-16.896 3.072-26.112-4.608-23.04-23.04v-13.824c3.072-15.36 4.608-27.648 4.608-35.328V419.84c-18.432 9.216-36.864 15.36-52.224 19.968-7.68 1.536-12.288 0-13.824-1.536-1.536-3.072 0-6.144 6.144-10.752l4.608-4.608c39.936-36.864 72.192-69.12 96.768-99.84 15.36-16.896 29.184-39.936 41.472-67.584 3.072-6.144 9.216-7.68 18.432-6.144 30.72 6.144 61.44 13.824 92.16 23.04 6.144 3.072 9.216 7.68 9.216 13.824-1.536 6.144-4.608 9.216-10.752 9.216-13.824 3.072-23.04 6.144-27.648 10.752l-9.216 9.216h46.08c12.288-15.36 21.504-27.648 32.256-32.256 19.968 7.68 46.08 21.504 75.264 43.008 6.144 10.752 7.68 16.896 6.144 23.04-3.072 4.608-9.216 6.144-18.432 6.144-24.576 1.536-52.224 12.288-82.944 29.184h95.232c12.288-15.36 18.432-24.576 24.576-24.576 30.72 12.288 55.296 26.112 75.264 43.008 0 7.68-3.072 12.288-10.752 13.824-6.144 4.608-9.216 9.216-9.216 13.824v6.144c1.536 7.68 1.536 13.824 1.536 23.04 1.536 15.36-3.072 24.576-13.824 27.648-6.144 1.536-10.752 3.072-13.824 4.608 13.824 10.752 24.576 18.432 38.4 29.184 4.608 6.144 6.144 12.288 4.608 15.36-4.608 6.144-9.216 7.68-13.824 6.144-13.824 0-26.112 0-43.008 1.536-23.04 4.608-47.616 9.216-72.192 13.824 39.936 56.832 95.232 89.088 159.744 95.232 6.144 1.536 9.216 4.608 10.752 10.752 4.608 0 1.536 4.608-4.608 7.68z"
                      fill="#FFEBB1"/>
                  <path
                      d="M633.344 402.944h-56.832c-12.288 19.968-23.04 39.936-38.4 56.832h95.232V402.944z m-1.536 70.656h-105.984c-12.288 12.288-21.504 19.968-33.792 29.184 19.968 12.288 38.4 24.576 49.152 39.936 41.472-24.576 72.192-47.616 90.624-69.12zM398.336 416.768v43.008h41.472c13.824-16.896 26.112-36.864 38.4-56.832H402.944c-3.072 4.608-4.608 9.216-4.608 13.824z m129.024-84.48H459.776c-19.968 16.896-41.472 33.792-64.512 47.616 1.536 0 3.072 0 6.144 1.536 4.608 1.536 6.144 3.072 6.144 4.608h95.232l24.576-53.76z"
                      fill="#FF8934"/>
                </svg>

              </el-icon>
              <template #title>
                <span>中国象棋</span>
                <el-tag size="small" effect="dark" type="info" class="menu-tag">策略</el-tag>
              </template>
            </el-menu-item>


            <!-- 404页面 -->
            <el-menu-item index="/404" route="/404" class="gomoku-menu-item">
              <el-icon class="dynamic-icon">
                <svg viewBox="0 0 1024 1024" width="200" height="200">
                  <path
                      d="M931.6 585.6v79c28.6-60.2 44.8-127.4 44.8-198.4C976.4 211 769.4 4 514.2 4S52 211 52 466.2c0 3.2 0.2 6.4 0.2 9.6l166-206h96.4L171.8 485.6h46.4v-54.8l99.2-154.6V668h-99.2v-82.4H67.6c43 161 170.6 287.4 332.4 328.6-10.4 26.2-40.6 89.4-90.8 100.6-62.2 14 168.8 3.4 333.6-104.6C769.4 873.6 873.6 784.4 930.2 668h-97.6v-82.4H666.4V476l166.2-206.2h94L786.2 485.6h46.4v-59l99.2-154v313zM366.2 608c-4.8-11.2-7.2-23.2-7.2-36V357.6c0-12.8 2.4-24.8 7.2-36 4.8-11.2 11.4-21 19.6-29.2 8.2-8.2 18-14.8 29.2-19.6 11.2-4.8 23.2-7.2 36-7.2h81.6c12.8 0 24.8 2.4 36 7.2 11 4.8 20.6 11.2 28.8 19.2l-88.6 129.4v-23c0-4.8-1.6-8.8-4.8-12-3.2-3.2-7.2-4.8-12-4.8s-8.8 1.6-12 4.8c-3.2 3.2-4.8 7.2-4.8 12v72L372.6 620c-2.4-3.8-4.6-7.8-6.4-12z m258.2-36c0 12.8-2.4 24.8-7.2 36-4.8 11.2-11.4 21-19.6 29.2-8.2 8.2-18 14.8-29.2 19.6-11.2 4.8-23.2 7.2-36 7.2h-81.6c-12.8 0-24.8-2.4-36-7.2-11.2-4.8-21-11.4-29.2-19.6-3.6-3.6-7-7.8-10-12l99.2-144.6v50.6c0 4.8 1.6 8.8 4.8 12 3.2 3.2 7.2 4.8 12 4.8s8.8-1.6 12-4.8c3.2-3.2 4.8-7.2 4.8-12v-99.6L601 296.4c6.6 7.4 12 15.8 16 25.2 4.8 11.2 7.2 23.2 7.2 36V572z"
                      fill="#e73725"/>
                </svg>
              </el-icon>
              <template #title>
                <span>404测试页</span>
                <el-tag size="small" effect="dark" type="warning" class="menu-tag">测试</el-tag>
              </template>
            </el-menu-item>


            <!-- 手写数字识别 -->
            <el-menu-item index="/cnn-hand-write-number" route="/cnn-hand-write-number" class="gomoku-menu-item">
              <el-icon class="dynamic-icon">
                <svg viewBox="0 0 1232 1024" width="200" height="200">
                  <path d="M195.254237 93.288136h850.440678v850.440678H195.254237z" fill="#F7F6F4"></path>
                  <path d="M256.867797 154.901695h729.38305v729.383051H256.867797z" fill="#FDFFFE"></path>
                  <path
                      d="M1067.389831 965.423729H173.125424V71.159322H1067.389831v894.264407z m-21.694916-872.135593H195.254237v850.440678h850.440678v-850.440678z"
                      fill="#B98963"></path>
                  <path
                      d="M994.061017 892.094915H246.454237V144.488136h747.60678v747.606779z m-18.223729-729.383051H264.677966v710.725424h710.725424V162.711864z"
                      fill="#B98963"></path>
                  <path
                      d="M442.142373 681.220339H798.372881v14.752542h-356.230508zM509.830508 738.061017h220.854238v10.413559h-220.854238zM876.040678 373.586441h-27.335593v154.901695H759.322034V373.586441h-28.20339v180.935593H876.474576V373.586441z m-189.179661 0h-148.39322v180.935593h28.203389v-70.725424h120.189831V373.586441z m-120.189831 84.176271V399.620339h91.986441v58.576271h-91.986441z m-68.555932 70.725424h-104.135593V399.620339h103.701695v-26.033898H364.474576v180.935593h133.20678v-26.033898z"
                      fill="#B98963"></path>
                  <path
                      d="M876.040678 373.586441v-2.60339H846.101695v154.901695h-84.61017V370.983051h-33.410169v186.142373h150.562712V370.983051h-2.60339v2.60339h-2.60339v178.332203H733.288136V376.189831h23.430508v154.901694h94.589831V376.189831h24.732203v-2.60339h-2.60339 2.60339z m-189.179661 0v-2.60339h-150.99661v186.142373h33.410169v-70.725424h120.189831V370.983051h-2.60339v2.60339h-2.60339v107.606779H564.067797v70.725424h-23.430509V376.189831h145.789831v-2.60339h-2.60339 3.037288z m-120.189831 84.176271h2.60339V402.223729h86.779661V455.59322h-89.383051v2.169492h2.60339-2.60339v2.60339h94.155933V397.016949H564.067797v63.783051h2.603389v-3.037288z m-68.555932 70.725424v-2.60339H396.583051V402.223729h103.701695v-31.240678H361.871186v186.142373h138.41356v-31.240678h-2.60339v2.60339h-2.60339v23.430508H367.077966V376.189831h128v20.827118H391.376271v134.508475h106.305085v-3.037288h-2.60339 3.037288zM219.986441 16.054237h26.467796v59.01017h-26.467796zM272.054237 16.054237h26.467797v59.01017h-26.467797zM324.122034 16.054237h26.467797v59.01017h-26.467797zM376.189831 16.054237h26.467796v59.01017h-26.467796zM427.823729 16.054237h26.467796v59.01017h-26.467796zM479.891525 16.054237h26.467797v59.01017h-26.467797zM531.959322 16.054237h26.467797v59.01017h-26.467797zM583.59322 16.054237h26.467797v59.01017h-26.467797zM635.661017 16.054237h26.467797v59.01017h-26.467797zM687.728814 16.054237h26.467796v59.01017h-26.467796zM739.362712 16.054237h26.467796v59.01017h-26.467796zM791.430508 16.054237h26.467797v59.01017h-26.467797zM843.498305 16.054237h26.467797v59.01017h-26.467797zM895.132203 16.054237h26.467797v59.01017h-26.467797zM947.2 16.054237h26.467797v59.01017h-26.467797zM999.267797 16.054237h26.467796v59.01017h-26.467796zM1119.813424 115.438644v26.467797h-59.01017v-26.467797zM1119.683254 167.371932v26.467797h-59.010169v-26.467797zM1119.978305 219.309559v26.467797h-59.010169v-26.467797zM1119.848136 271.242847v26.467797h-59.01017v-26.467797zM1119.717966 323.176136v26.467796h-59.010169v-26.467796zM1120.017356 375.113763v26.467796h-59.01017v-26.467796zM1119.882847 427.042712v26.467796h-59.010169v-26.467796zM1119.748339 478.980339v26.467797h-59.01017v-26.467797zM1120.052068 530.917966v26.467797h-59.01017v-26.467797zM1119.917559 582.851254v26.467797h-59.010169v-26.467797zM1119.783051 634.784542v26.467797h-59.01017v-26.467797zM1120.082441 686.717831v26.467796h-59.01017v-26.467796zM1119.952271 738.655458v26.467796h-59.010169v-26.467796zM1119.817763 790.588746v26.467796h-59.01017v-26.467796zM1119.683254 842.522034v26.467797h-59.010169v-26.467797zM1119.986983 894.455322v26.467797h-59.010169v-26.467797zM179.79878 115.633898v26.467797h-59.01017v-26.467797zM179.664271 167.567186v26.467797h-59.010169v-26.467797zM179.968 219.500475v26.467796h-59.010169v-26.467796zM179.833492 271.433763v26.467796h-59.01017v-26.467796zM179.698983 323.367051v26.467796h-59.010169v-26.467796zM179.998373 375.304678v26.467797h-59.01017v-26.467797zM179.868203 427.237966v26.467797h-59.010169v-26.467797zM179.733695 479.171254v26.467797h-59.01017v-26.467797zM180.033085 531.108881v26.467797h-59.01017v-26.467797zM179.902915 583.042169v26.467797h-59.010169v-26.467797zM179.768407 634.975458v26.467796h-59.01017v-26.467796zM180.067797 686.908746v26.467796H121.057627v-26.467796zM179.937627 738.842034v26.467797h-59.010169v-26.467797zM179.803119 790.779661v26.467797h-59.01017v-26.467797zM179.66861 842.717288v26.467797h-59.010169v-26.467797zM179.968 894.650576v26.467797h-59.010169v-26.467797zM219.986441 956.311864h26.467796V1015.322034h-26.467796zM272.054237 956.311864h26.467797V1015.322034h-26.467797zM324.122034 956.311864h26.467797V1015.322034h-26.467797zM376.189831 956.311864h26.467796V1015.322034h-26.467796zM427.823729 956.311864h26.467796V1015.322034h-26.467796zM479.891525 956.311864h26.467797V1015.322034h-26.467797zM531.959322 956.311864h26.467797V1015.322034h-26.467797zM583.59322 956.311864h26.467797V1015.322034h-26.4677926.467797V1015.322034h-26.467797zM635.661017 956.311864h26.467797V1015.322034h-26.467797zM687.728814 956.311864h26.467796V1015.322034h-26.467796zM739.362712 956.311864h26.467796V1015.322034h-26.467796zM791.430508 956.311864h26.467797V1015.322034h-26.467797zM843.498305 956.311864h26.467797V1015.322034h-26.467797zM895.132203 956.311864h26.467797V1015.322034h-26.467797zM947.2 956.311864h26.467797V1015.322034h-26.467797zM999.267797 956.311864h26.467796V1015.322034h-26.467796z"
                      fill="#B98963"></path>
                  <path
                      d="M303.728814 193.952542m-13.450848 0a13.450847 13.450847 0 1 0 26.901695 0 13.450847 13.450847 0 1 0-26.901695 0Z"
                      fill="#B98963"></path>
                  <path
                      d="M937.220339 193.952542m-13.450847 0a13.450847 13.450847 0 1 0 26.901694 0 13.450847 13.450847 0 1 0-26.901694 0Z"
                      fill="#B98963"></path>
                  <path
                      d="M303.728814 843.064407m-13.450848 0a13.450847 13.450847 0 1 0 26.901695 0 13.450847 13.450847 0 1 0-26.901695 0Z"
                      fill="#B98963"></path>
                  <path
                      d="M937.220339 843.064407m-13.450847 0a13.450847 13.450847 0 1 0 26.901694 0 13.450847 13.450847 0 1 0-26.901694 0Z"
                      fill="#B98963"></path>
                </svg>
              </el-icon>
              <template #title>
                <span>数字识别</span>
                <el-tag size="small" effect="dark" type="success" class="menu-tag">AI</el-tag>
              </template>
            </el-menu-item>

            <!-- CIFAR10分类菜单项 -->
            <el-menu-item index="/cifar10-classifier" route="/cifar10-classifier" class="gomoku-menu-item">
              <el-icon class="dynamic-icon">
                <svg viewBox="0 0 1024 1024" width="200" height="200">
                  <path
                      d="M329.142857 438.857143c40.393143 0 73.142857-32.749714 73.142857-73.142857 0-40.411429-32.749714-73.142857-73.142857-73.142857-40.356571 0-73.142857 32.731429-73.142857 73.142857C256 406.107429 288.786286 438.857143 329.142857 438.857143z"
                      fill="#F69661"></path>
                  <path
                      d="M658.285714 393.142857 441.536 698.784914 329.142857 542.749257 146.285714 804.571429 877.714286 804.571429Z"
                      fill="#F69661"></path>
                  <path
                      d="M950.857143 91.428571 73.142857 91.428571c-20.214857 0-36.571429 16.374857-36.571429 36.571429l0 768c0 20.214857 16.356571 36.571429 36.571429 36.571429l877.714286 0c20.214857 0 36.571429-16.356571 36.571429-36.571429L987.428571 128C987.428571 107.803429 971.072 91.428571 950.857143 91.428571zM914.285714 859.428571 109.714286 859.428571 109.714286 164.571429l804.571429 0L914.285714 859.428571z"
                      fill="#F69661"></path>
                </svg>
              </el-icon>
              <template #title>
                <span>CIFAR10分类</span>
                <el-tag size="small" effect="dark" type="success" class="menu-tag">AI</el-tag>
              </template>
            </el-menu-item>

            <!--AI对话-->
            <el-menu-item index="/ai-chat" route="/ai-chat" class="gomoku-menu-item">
              <el-icon class="dynamic-icon">
                <svg viewBox="0 0 1024 1024"
                     width="200" height="200">
                  <path
                      d="M832 839.9H203.3c-10.8 0-19.6-8.8-19.6-19.6V547.5c0-109.8 89.3-199.2 199.2-199.2h269.4c109.8 0 199.2 89.4 199.2 199.2v272.8c0.1 10.8-8.7 19.6-19.5 19.6z m-609.1-39.2h589.5V547.5c0-88.2-71.8-160-160-160H382.9c-88.2 0-160 71.8-160 160v253.2z"
                      fill="#1E94FC"></path>
                  <path
                      d="M665.8 609.2H369.5c-33.1 0-60-26.9-60-60s26.9-60 60-60h296.4c33.1 0 60 26.9 60 60-0.1 33.1-27 60-60.1 60z m-296.3-80.8c-11.5 0-20.8 9.3-20.8 20.8S358 570 369.5 570h296.4c11.5 0 20.8-9.4 20.8-20.8 0-11.5-9.3-20.8-20.8-20.8H369.5z"
                      fill="#28E3C4"></path>
                  <path
                      d="M192.1 730.4h-44.9c-15.8 0-28.6-12.8-28.6-28.6V612c0-15.8 12.8-28.6 28.6-28.6h44.9c10.8 0 19.6 8.8 19.6 19.6s-8.8 19.6-19.6 19.6h-34.3v68.6h34.3c10.8 0 19.6 8.8 19.6 19.6s-8.8 19.6-19.6 19.6zM883.6 730.4h-44.9c-10.8 0-19.6-8.8-19.6-19.6s8.8-19.6 19.6-19.6H873v-68.6h-34.3c-10.8 0-19.6-8.8-19.6-19.6s8.8-19.6 19.6-19.6h44.9c15.8 0 28.6 12.8 28.6 28.6v89.8c0 15.8-12.8 28.6-28.6 28.6zM627.7 384.7c-4.4 0-8.9-1.5-12.6-4.6-8.3-6.9-9.4-19.3-2.4-27.6l139.2-166.1c6.9-8.3 19.3-9.4 27.6-2.4 8.3 6.9 9.4 19.3 2.4 27.6L642.7 377.7c-3.9 4.6-9.4 7-15 7zM403.1 384.7c-5.6 0-11.1-2.4-15-7L248.9 211.5c-7-8.3-5.9-20.7 2.4-27.6 8.3-7 20.6-5.9 27.6 2.4l139.2 166.1c7 8.3 5.9 20.7-2.4 27.6-3.6 3.2-8.1 4.7-12.6 4.7z"
                      fill="#1E94FC"></path>
                  <path
                      d="M780.3 218.9c-23.4 0-42.5-19-42.5-42.5s19-42.5 42.5-42.5 42.5 19 42.5 42.5-19 42.5-42.5 42.5z m0-44.9c-1.4 0-2.5 1.1-2.5 2.5s1.1 2.5 2.5 2.5 2.5-1.1 2.5-2.5-1.1-2.5-2.5-2.5zM250.5 218.9c-23.4 0-42.5-19-42.5-42.5s19-42.5 42.5-42.5 42.5 19 42.5 42.5-19.1 42.5-42.5 42.5z m0-44.9c-1.4 0-2.5 1.1-2.5 2.5s1.1 2.5 2.5 2.5 2.5-1.1 2.5-2.5-1.2-2.5-2.5-2.5z"
                      fill="#1E94FC"></path>
                </svg>
              </el-icon>
              <template #title>
                <span>AI对话</span>
                <el-tag size="small" effect="dark" type="success" class="menu-tag">AI</el-tag>
              </template>
            </el-menu-item>

            <!-- 植物大战僵尸-->
            <el-menu-item index="plants-zombies" route="/plants-zombies" class="gomoku-menu-item">
              <el-icon class="dynamic-icon">
                <svg viewBox="0 0 1477 1024" width="200" height="200">
                  <path
                      d="M1114.693494 1.047983c45.092251-3.149948 89.593513 0.787987 133.109791 12.0118 43.516278 11.223814 82.307634 25.203582 116.176071 41.941304 33.867438 16.736722 61.237983 34.458428 82.306633 53.165117 20.872653 18.902686 31.505477 34.655425 31.505477 47.651209 0 12.995784-8.072866 20.675657-24.219598 23.431611-16.146732 2.756954-36.231399 5.119915-60.450996 7.285879-24.219598 2.165964-50.802157 6.103899-79.747676 12.011801-28.944519 5.906902-56.512062 19.099683-82.306634 39.578343-17.130716 12.995784-33.671441 27.172549-49.227182 42.72929-15.555742 15.554742-31.111484 30.71649-46.864222 45.091252-15.555742 14.570758-31.701474 27.960536-48.439196 40.36633-16.736722 12.404794-34.655425 21.856637-53.952105 28.157532-9.64884 3.149948-21.463644 6.497892-35.443411 9.64884-13.980768 3.149948-28.749523 3.937935-44.304265 2.362961-15.555742-1.575974-31.702474-6.694889-48.439195-15.359745-16.934719-8.269863-32.883454-22.840621-47.849206-43.122284-9.64784 12.799788-18.115699 28.157533-25.006585 45.879238-7.089882 17.721706-13.192781 36.822389-18.509693 57.300049-5.316912 20.47866-10.041833 41.744307-13.783771 63.798941-3.740938 22.052634-6.694889 42.729291-8.859853 62.02497-2.166964 16.146732-3.741938 36.231399-4.923918 60.450996-0.983984 24.219598-1.377977 48.045202-0.786987 71.870807 0.58999 23.629608 1.968967 45.486245 3.937935 65.373915 2.165964 19.88767 5.316912 34.064434 9.64884 42.72929 5.315912 9.64784 8.072866 17.720706 8.072866 24.219598 0 5.315912-2.756954 10.435827-8.072866 15.358745-5.316912 4.921918-15.555742 7.284879-30.71749 7.284879-17.131716 0-28.749523-2.362961-34.656425-7.284879-5.906902-4.922918-8.859853-10.042833-8.859853-15.359745-0.984984-6.497892 0.983984-13.979768 6.496892-22.643624 5.316912-10.82982 8.860853-23.432611 10.436827-38.003369 1.574974-14.570758 2.165964-30.1265 1.574974-46.864222a2298.481842 2298.481842 0 0 0-2.362961-50.802156c-0.984984-17.130716-1.574974-33.867438-1.574974-50.01417-16.934719-34.262431-33.671441-63.403947-49.818173-87.033555-16.145732-23.629608-33.867438-46.273232-53.165117-67.735876-11.813804 25.794572-25.597575 45.091251-41.153317 58.088036-15.555742 12.995784-31.505477 21.856637-47.652209 26.582559-16.145732 4.921918-31.504477 7.087882-45.879238 6.497892-14.570758-0.59099-27.172549-1.969967-38.003369-3.938935-19.29668-3.149948-37.609376-9.450843-54.937088-18.509693a592.13917 592.13917 0 0 1-51.589144-30.71649c-17.131716-11.223814-34.656425-23.432611-52.37813-36.231398-17.721706-12.995784-35.836405-24.219598-53.952105-33.868438-27.961536-16.145732-56.709059-24.809588-86.245568-25.794572-29.53651-0.983984-56.513062-0.196997-80.73266 2.362961-24.219598 2.756954-44.107268 3.740938-59.663009 3.149948C7.875869 425.581935 0 418.296056 0 404.315288c0-13.979768 8.860853-31.701474 26.582559-53.164118 17.721706-21.463644 41.350314-42.729291 70.886823-63.79894 29.53651-20.871653 64.191934-39.77534 103.967274-56.512062s81.716643-27.173549 125.823911-31.505477c67.735875-6.497892 123.854944-2.952951 168.553202 10.436826 44.697258 13.389778 79.550679 32.489461 104.754261 57.299049 25.598575 25.007585 41.350314 53.362114 47.849205 85.655578 6.497892 32.292464 5.315912 64.585928-3.150947 96.878392 34.459428 31.111484 68.326866 70.886823 101.604313 119.326019 5.316912-52.771124 18.705689-105.936241 40.36633-159.692349 8.663856-18.311696 16.736722-33.867438 24.219598-46.864222 7.481876-12.995784 16.736722-26.975552 27.369545-41.941304-17.327712-31.110484-26.188565-64.388931-26.582559-99.831342-0.58999-35.443412 9.64884-68.918856 30.717491-100.02934 21.06965-31.111484 53.559111-57.891039 97.666378-79.944672 43.910271-22.053634 101.998307-35.246415 174.06711-39.578343z m-480.848017 443.632635c-60.057003-51.589144-123.657947-84.866591-190.212842-100.02834-66.751892-14.965752-135.471751-13.389778-206.556571 4.921919-2.164964 0-2.755954 0.196997-1.574974 0.787986 0.984984 0.58999 2.756954 0.787987 4.922919 0.787987a798.203749 798.203749 0 0 1 95.106421-3.938934c32.293464 0.59099 64.782925 5.316912 97.666378 14.571758 32.883454 9.05785 65.372915 22.643624 97.666379 40.36533 32.292464 17.721706 63.994938 41.745307 95.106421 71.871807l7.875869-29.339513z m592.10117-306.387914c2.165964 0 3.740938-0.196997 4.922919-0.787987 0.983984-0.58999 0-0.786987-3.149948-0.786987-78.566696-7.482876-149.453519 4.528925-212.857466 36.230399-63.404947 31.702474-119.326019 78.172702-167.765215 139.607682l16.145732 27.369546c28.945519-39.77434 58.876023-72.658794 89.593512-98.453366 30.71749-25.794572 61.828974-46.273232 93.530448-61.238983 31.702474-14.963752 62.61696-25.596575 92.74346-31.504477s58.876023-9.451843 86.836558-10.435827z m-841.976022 824.255316c-8.664856-7.482876-5.907902-16.343729 8.072866-26.582558 13.979768-10.23983 34.458428-20.675657 61.237984-31.505477 26.976552-10.82982 57.299049-21.856637 91.168486-33.079451 33.867438-11.224814 66.357898-21.266647 97.665379-29.930503 13.980768-4.331928 25.007585-3.938935 33.080451 0.786987 8.073866 4.922918 15.555742 11.026817 22.644624 18.509692 7.088882 7.482876 15.555742 14.767755 25.794572 21.856637 10.23983 7.088882 25.007585 10.435827 44.304264 10.435827 19.29768 0 34.065434-3.543941 44.304264-10.435827 10.23983-6.891886 19.099683-13.979768 26.582559-20.872653 7.482876-7.087882 14.965752-12.995784 22.644624-17.721706 7.482876-4.921918 18.312696-5.709905 32.292464-2.361961 31.111484 8.663856 63.994938 18.902686 98.454366 30.71749 34.459428 11.813804 65.372915 23.431611 92.74346 34.655425 27.369546 11.223814 48.045202 22.053634 62.02597 32.292464 13.979768 10.23983 15.555742 17.919703 4.922918 23.432611-25.795572 13.979768-60.450996 25.597575-103.968273 34.655425-43.516278 9.05785-90.773493 15.949735-141.969644 20.084666-50.999153 4.331928-103.770277 6.497892-158.117375 6.497892-54.346098 0-105.738245-2.362961-153.981443-7.285879-48.439196-4.921918-91.364483-11.813804-128.973859-20.871653-38.003369-9.451843-64.782925-20.47866-80.928657-33.277448z"
                      fill="#0DAA66"></path>
                </svg>

              </el-icon>
              <template #title>
                <span>植物大战僵尸</span>
                <el-tag size="small" effect="dark" type="success" class="menu-tag">卡牌游戏</el-tag>
              </template>
            </el-menu-item>

            <!-- 迷宫-->
            <el-menu-item index="maze-game" route="/maze-game" class="gomoku-menu-item">
              <el-icon class="dynamic-icon">
                <svg viewBox="0 0 1024 1024" width="200" height="200">
                  <path
                      d="M416.96 63.36L416.896 64H896a64 64 0 0 1 64 64v768a64 64 0 0 1-64 64H132.8a64 64 0 0 1-64-64V538.88l-0.576 0.064v-63.36l0.576-0.064V128a64 64 0 0 1 64-64h220.736V63.36h63.36z m-286.72 804.544a32 32 0 0 0 32 32h191.296v-107.328a31.68 31.68 0 0 1 63.36 0v107.328h285.376v-75.648H607.168a31.68 31.68 0 0 1 0-63.36h95.104v-95.168a31.68 31.68 0 0 1 63.36 0v234.176h100.992a32 32 0 0 0 32-32l-0.064-535.04h-132.864v142.72a31.68 31.68 0 0 1-63.36 0V332.8H607.104a31.68 31.68 0 1 1 0-63.36l291.392-0.064V161.472a32 32 0 0 0-32-32H416.96v92.416a31.68 31.68 0 0 1-63.36 0V129.472H162.24a32 32 0 0 0-32 32V475.52h223.36v-63.36a31.68 31.68 0 0 1 63.36 0v190.208a31.68 31.68 0 0 1-63.36 0v-63.36l-223.36-0.064v328.96z"
                      fill="#41CD64"></path>
                </svg>
              </el-icon>
              <template #title>
                <span>迷宫</span>
                <el-tag size="small" effect="dark" type="success" class="menu-tag">游戏</el-tag>
              </template>
            </el-menu-item>

            <!--飞机大战-->
            <el-menu-item index="number-connection-game" route="/number-connection-game" class="gomoku-menu-item">
              <el-icon class="dynamic-icon">
                <svg viewBox="0 0 1024 1024"
                     width="200" height="200">
                  <path d="M32.9 102.5l683.8 204.4 204.4 683.7-107.4-55.3-119.9-206.7-216.8-182-182.1-216.8L88.3 209.9z"
                        fill="#8599A4"></path>
                  <path
                      d="M921.1 999.6c-1.4 0-2.8-0.3-4.1-1l-107.4-55.3c-1.5-0.8-2.8-2-3.7-3.5L686.8 734.5 471.2 553.4c-0.4-0.3-0.8-0.7-1.1-1.1L289 336.8 83.8 217.6c-1.5-0.9-2.7-2.1-3.5-3.7L24.9 106.6c-1.7-3.2-1.2-7.1 1.1-9.9 2.3-2.8 6-3.9 9.5-2.9l683.7 204.4c2.9 0.9 5.2 3.1 6 6L929.7 988c1 3.5-0.1 7.2-2.9 9.5-1.6 1.4-3.7 2.1-5.7 2.1z m-100.9-71.1l86.2 44.4-196.9-658.8L50.6 117.2 95 203.4 299.4 322c0.9 0.5 1.7 1.2 2.4 2l181.6 216.2 216.2 181.6c0.8 0.7 1.5 1.5 2 2.4l118.6 204.3z"
                      fill="#3E4152"></path>
                  <path d="M29 575.3l322.8 96.5 96.5 322.8-50.7-26.1-56.7-97.6L238.6 785l-86-102.4L55.1 626z"
                        fill="#8599A4"></path>
                  <path
                      d="M448.2 1003.6c-1.4 0-2.8-0.3-4.1-1l-50.7-26.1c-1.5-0.8-2.8-2-3.7-3.5l-55.8-96.2-101.1-84.9c-0.4-0.3-0.8-0.7-1.1-1.1l-84.9-101.1-96.2-55.8c-1.5-0.9-2.7-2.1-3.5-3.7L21 579.4c-1.7-3.2-1.2-7.1 1.1-9.9 2.3-2.8 6-3.9 9.5-2.9l322.8 96.5c2.9 0.9 5.2 3.1 6 6L456.9 992c1 3.5-0.1 7.2-2.9 9.5-1.7 1.4-3.7 2.1-5.8 2.1zM404 961.7l29.5 15.2-89-297.9-297.8-89 15.2 29.5 95.3 55.3c0.9 0.5 1.7 1.2 2.4 2L245 778.6 346.7 864c0.8 0.7 1.5 1.5 2 2.4l55.3 95.3z"
                      fill="#3E4152"></path>
                  <path
                      d="M942.3 202.6L254.5 890.5c-33.4 33.4-140 85.4-173.4 52-33.4-33.4 18.6-140 52-173.4L820.9 81.2c33.4-33.3 122.7-68 156.1-34.6 33.4 33.3-1.3 122.6-34.7 156z"
                      fill="#C1E7D8"></path>
                  <path
                      d="M113.5 962.3c-19.9 0-31.8-6.4-38.8-13.5-12.3-12.3-22.4-38.9-1.1-96.2 12.8-34.5 34.7-71.5 53.1-89.9L814.6 74.9c18.2-18.2 50.4-35.7 82-44.7 38.6-10.9 69.5-7.4 86.8 10 17.4 17.4 20.9 48.2 10 86.8-8.9 31.6-26.5 63.7-44.7 82L260.8 896.8c-18.5 18.5-55.4 40.3-89.9 53.1-24.2 9-42.9 12.4-57.4 12.4zM936.9 42c-10.4 0-22.4 1.8-35.5 5.5-28.4 8-58.2 24.1-74.1 40.1L139.4 775.5c-16.6 16.6-37.2 51.7-49 83.5-13.8 37.2-14.9 65.3-3 77.2 11.9 11.9 40 10.8 77.2-3 31.8-11.8 66.9-32.4 83.5-49L936 196.3c16-16 32.1-45.7 40.1-74.1 8.9-31.6 7-56.9-5.4-69.2-7.3-7.3-19-11-33.8-11z"
                      fill="#3E4152"></path>
                  <path d="M838.3 185.3m-36.8 0a36.8 36.8 0 1 0 73.6 0 36.8 36.8 0 1 0-73.6 0Z" fill="#9B5C77"
                  ></path>
                  <path
                      d="M838.3 231.1c-12.2 0-23.7-4.8-32.4-13.4-8.6-8.6-13.4-20.1-13.4-32.4 0-12.2 4.8-23.7 13.4-32.4 8.6-8.6 20.1-13.4 32.4-13.4 12.2 0 23.7 4.8 32.4 13.4 8.6 8.6 13.4 20.1 13.4 32.4 0 12.2-4.8 23.7-13.4 32.4-8.7 8.6-20.2 13.4-32.4 13.4z m0-73.6c-7.4 0-14.4 2.9-19.6 8.1-5.2 5.2-8.1 12.2-8.1 19.6 0 7.4 2.9 14.4 8.1 19.6 5.2 5.2 12.2 8.1 19.6 8.1 7.4 0 14.4-2.9 19.6-8.1 5.2-5.2 8.1-12.2 8.1-19.6 0-7.4-2.9-14.4-8.1-19.6-5.2-5.2-12.2-8.1-19.6-8.1z"
                      fill="#3E4152"></path>
                </svg>
              </el-icon>
              <template #title>
                <span>飞机大战</span>
                <el-tag size="small" effect="dark" type="success" class="menu-tag">游戏</el-tag>
              </template>
            </el-menu-item>

            <!-- 大富翁-->
            <el-menu-item index="zillionaire" route="/zillionaire" class="gomoku-menu-item">
              <el-icon class="dynamic-icon">
                <svg viewBox="0 0 1024 1024"
                     width="200" height="200">
                  <path
                      d="M280.627848 954.653165a233.316456 40.182278 0 1 0 466.632911 0 233.316456 40.182278 0 1 0-466.632911 0Z"
                      fill="#EFEFEF"></path>
                  <path
                      d="M410.248101 259.240506l228.131646 5.18481s150.359494 135.453165 163.321519 187.301266h65.458228s44.070886-1.296203 92.030379 63.513924l-20.73924 22.683545c-15.55443-27.220253-40.83038-47.311392-70.643038-56.38481l-53.144304 1.296202s48.607595 119.898734-27.220253 232.668354-190.541772 116.658228-190.541772 116.658228l-5.18481 92.03038s-13.610127 18.146835-22.035443 0l-11.665823-85.549367s-66.106329 7.777215-99.807595-1.296203l-0.648101 89.437975s-14.258228 22.683544-26.572152-0.648101l-15.554431-99.807595s-97.863291-22.035443-162.025316-103.048101-33.053165-233.316456-33.053165-233.316456l-68.050633-1.296203S103.696203 477.002532 64.162025 418.673418l23.331646-20.09114s35.64557 50.551899 69.994937 60.273418l70.643038 0.648101s33.701266-77.772152 100.455696-125.731645L410.248101 259.240506zM413.488608 198.318987l198.318987 3.888608s41.478481-66.106329 79.068354-95.918987-5.832911-58.329114-31.10886-35.64557S596.253165 49.903797 596.253165 49.903797s-29.812658-25.924051-58.977216 0-33.701266 12.313924-51.2-7.129113-48.607595-2.592405-62.217721 14.258227-37.589873 10.36962-50.551899 0.648102-55.088608-3.888608-37.589873 34.997468c1.296203 0 54.440506 30.460759 77.772152 105.640506z"
                      fill="#FFDA00"></path>
                  <path
                      d="M316.921519 564.496203c-1.944304 0-4.536709-0.648101-6.481013-2.592406-3.888608-3.240506-4.536709-9.721519-1.296202-13.610126 15.55443-18.146835 36.941772-30.460759 60.273418-34.997468-23.979747-12.313924-50.551899-7.777215-51.2-7.777216-5.18481 0.648101-10.36962-2.592405-11.017722-7.777215-0.648101-5.18481 2.592405-10.36962 7.777215-11.017721 1.944304-0.648101 54.440506-8.425316 87.493671 27.868354 2.592405 2.592405 3.240506 7.129114 1.296203 10.36962s-5.18481 5.832911-9.073418 5.832912c-27.220253-1.296203-53.144304 9.721519-70.643038 30.460759-1.296203 1.944304-4.536709 3.240506-7.129114 3.240507zM728.465823 554.774684c-2.592405 0-5.18481-0.648101-7.129114-2.592406-19.443038-19.443038-46.01519-28.516456-73.235443-25.275949-3.888608 0.648101-7.777215-1.296203-9.721519-4.536709-1.944304-3.240506-1.944304-7.777215 0.648101-11.017721 30.460759-38.886076 82.956962-34.997468 84.901266-34.997469 5.18481 0.648101 9.073418 5.18481 9.073418 10.369621-0.648101 5.18481-5.18481 9.073418-10.369621 9.073417-0.648101 0-27.220253-1.944304-50.551898 11.665823 23.331646 3.240506 45.367089 13.610127 62.217721 30.46076 3.888608 3.888608 3.888608 9.721519 0 13.610126-0.648101 2.592405-3.240506 3.240506-5.832911 3.240507zM550.237975 554.774684h-42.774684c-5.18481 0-9.721519-4.536709-9.721519-9.721519s4.536709-9.721519 9.721519-9.721519h42.774684c5.18481 0 9.721519 4.536709 9.721519 9.721519s-4.536709 9.721519-9.721519 9.721519zM435.524051 607.270886c-2.592405 0-4.536709-0.648101-6.481013-2.592405-3.888608-3.888608-3.888608-9.721519-0.648101-13.610127L453.670886 563.848101c3.888608-3.888608 9.721519-3.888608 13.610127-0.648101 3.888608 3.888608 3.888608 9.721519 0.648101 13.610127l-25.275949 27.220253c-1.944304 1.944304-4.536709 3.240506-7.129114 3.240506zM627.362025 607.270886c-2.592405 0-4.536709-0.648101-6.481012-2.592405l-29.164557-27.220253c-3.888608-3.888608-3.888608-9.721519-0.648102-13.610127 3.888608-3.888608 9.721519-3.888608 13.610127-0.648101l29.164557 27.220253c3.888608 3.888608 3.888608 9.721519 0.648101 13.610127-1.944304 1.944304-4.536709 3.240506-7.129114 3.240506z"
                      fill="#A85E00"></path>
                  <path
                      d="M534.035443 633.843038c-53.792405 0-93.326582-39.534177-95.270886-40.83038-3.888608-3.888608-3.888608-9.721519 0-13.610126 3.888608-3.888608 9.721519-3.888608 13.610127 0 0.648101 0.648101 36.293671 34.997468 81.660759 34.997468h0.648101c26.572152 0 51.2-12.313924 73.883545-34.997468 3.888608-3.888608 9.721519-3.888608 13.610126 0 3.888608 3.888608 3.888608 9.721519 0 13.610126-26.572152 27.220253-55.736709 40.83038-88.141772 40.83038z"
                      fill="#A85E00"></path>
                  <path
                      d="M316.921519 604.678481a36.293671 20.091139 0 1 0 72.587342 0 36.293671 20.091139 0 1 0-72.587342 0Z"
                      fill="#D37F6E"></path>
                  <path
                      d="M353.21519 627.362025c-22.035443 0-39.534177-10.36962-39.534177-23.331645s17.498734-23.331646 39.534177-23.331646 39.534177 10.36962 39.534177 23.331646-17.498734 23.331646-39.534177 23.331645z m0-39.534177c-17.498734 0-33.053165 7.777215-33.053165 16.850633s14.906329 16.850633 33.053165 16.850633 33.053165-7.777215 33.053164-16.850633-15.55443-16.850633-33.053164-16.850633z"
                      fill="#A85E00"></path>
                  <path
                      d="M673.377215 604.678481a36.293671 20.091139 0 1 0 72.587342 0 36.293671 20.091139 0 1 0-72.587342 0Z"
                      fill="#D37F6E"></path>
                  <path
                      d="M709.670886 627.362025c-22.035443 0-39.534177-10.36962-39.534177-23.331645s17.498734-23.331646 39.534177-23.331646c22.035443 0 39.534177 10.36962 39.534177 23.331646s-17.498734 23.331646-39.534177 23.331645z m0-39.534177c-17.498734 0-33.053165 7.777215-33.053164 16.850633s14.906329 16.850633 33.053164 16.850633c17.498734 0 33.053165-7.777215 33.053165-16.850633s-15.55443-16.850633-33.053165-16.850633z"
                      fill="#A85E00"></path>
                </svg>

              </el-icon>
              <template #title>
                <span>大富翁</span>
                <el-tag size="small" effect="dark" type="success" class="menu-tag">游戏</el-tag>
              </template>
            </el-menu-item>

            <!-- GeoJsonToShapefile-->
            <el-menu-item index="GeoJson-to-shapefile" route="/GeoJson-to-shapefile" class="gomoku-menu-item">
              <el-icon class="dynamic-icon">


              </el-icon>
              <template #title>
                <span>GeoJson-to-shapefile</span>
                <el-tag size="small" effect="dark" type="success" class="menu-tag">工具</el-tag>
              </template>
            </el-menu-item>


          </el-sub-menu>

          <!-- 学习资源 -->
          <el-sub-menu index="learning-resources">
            <template #title>
              <el-icon>
                <Notebook/>
              </el-icon>
              <span>学习资源</span>
            </template>
            <el-menu-item index="/tutorials">
              <el-icon>
                <Document/>
              </el-icon>
              <span>教程文档</span>
            </el-menu-item>
            <el-menu-item index="/cheatsheets">
              <el-icon>
                <Memo/>
              </el-icon>
              <span>速查表</span>
            </el-menu-item>
          </el-sub-menu>
        </el-menu>
      </div>
    </div>

    <!-- 折叠按钮 -->
    <div class="collapse-btn" @click="toggleCollapse">
      <el-icon>
        <component :is="isCollapse ? Expand : Fold"/>
      </el-icon>
      <span v-show="!isCollapse">收起菜单</span>
    </div>
  </div>
</template>

<script setup>
import {ref, computed} from 'vue'
import {useRoute} from 'vue-router'
import {
  Folder,
  Notebook,
  Document,
  Memo,
  Fold,
  Expand,
} from '@element-plus/icons-vue'

const route = useRoute()
const isCollapse = ref(false)

const activeIndex = computed(() => {
  return route.path
})

const toggleCollapse = () => {
  isCollapse.value = !isCollapse.value
}
</script>

<style scoped>
.sidebar-container {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 60px);
  background-color: #304156;
  position: fixed;
  left: 0;
  top: 60px;
  bottom: 0;
  z-index: 10;
  box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
  width: 220px;
  overflow: hidden;
}

.sidebar-logo {
  flex-shrink: 0;
  height: 60px;
  min-height: 60px;
  line-height: 60px;
  padding: 0 20px;
  background-color: #2b2f3a;
  overflow: hidden;
}

.logo-wrapper {
  display: flex;
  align-items: center;
  height: 100%;
}

.logo-img {
  width: 32px;
  height: 32px;
  margin-right: 12px;
}

.logo-text {
  font-size: 18px;
  font-weight: 600;
  color: #ffffff;
  white-space: nowrap;
}

.menu-scroll-container {
  flex: 1;
  overflow-y: auto;
  overflow-x: auto;
  width: 100%;
  /* 增加横向滚动提示 */
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

/* 外部容器用于实现横向滚动 */
.menu-outer-container {
  width: max-content;
  min-width: 100%;
}

.sidebar-menu {
  min-width: 200px;
  width: 100%;
  border-right: none !important;
  overflow: visible;
}


.el-menu-item [class^="el-icon"] {
  margin-right: 12px;
  font-size: 18px;
  vertical-align: middle;
}

.menu-tag {
  margin-left: 8px;
  transform: translateY(-1px);
  transition: all 0.3s;
}

.el-menu-item:hover .menu-tag {
  transform: translateY(-2px);
}

.heart-icon {
  color: #f56c6c;
  transition: all 0.3s;
}

.el-menu-item:hover .heart-icon {
  transform: scale(1.2) rotate(15deg);
}

.collapse-btn {
  flex-shrink: 0;
  height: 48px;
  min-height: 48px;
  padding: 0 24px;
  cursor: pointer;
  color: #b8c7ce;
  display: flex;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  width: 100%;
}

.collapse-btn:hover {
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.1);
}

.collapse-btn span {
  margin-left: 10px;
  font-size: 14px;
}

.collapse-btn .el-icon {
  font-size: 18px;
}


.el-menu--collapse .el-menu-item {
  width: auto;
  padding: 0 16px !important;
}

.el-menu--collapse .el-menu-item [class^="el-icon"] {
  margin-right: 0;
}

.el-menu--collapse .menu-tag,
.el-menu--collapse .collapse-btn span,
.el-menu--collapse .el-sub-menu__title span {
  display: none;
}

.el-menu--collapse .sidebar-logo .logo-text {
  display: none;
}

.el-menu--collapse .sidebar-logo {
  padding: 0 10px;
}

.menu-scroll-container::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.menu-scroll-container::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}

.menu-scroll-container::-webkit-scrollbar-track {
  background-color: transparent;
}

/* 子菜单样式 */


.el-sub-menu.is-active .el-sub-menu__title {
  color: #409EFF !important;
}

.el-menu-item [class^="el-icon"],
.el-sub-menu__title [class^="el-icon"] {
  transition: transform 0.2s;
}

.el-menu-item:hover [class^="el-icon"],
.el-sub-menu__title:hover [class^="el-icon"] {
  transform: scale(1.1);
}


.el-menu--collapse .el-sub-menu__title {
  padding-left: 20px !important;
}

/* 横向滚动提示 */
.menu-scroll-container:hover {
  overflow-x: auto;
}

/* 防止折叠模式下出现滚动 */
.el-menu--collapse + .menu-outer-container {
  overflow-x: hidden !important;
}

/* 菜单项动画 */
.gomoku-menu-item {
  position: relative;
  overflow: hidden;
  white-space: nowrap; /* 防止文字换行 */
}

.gomoku-menu-item::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #9c27b0, #2196f3);
  transition: all 0.3s;
}

.gomoku-menu-item:hover::after {
  left: 0;
  width: 100%;
}

/* 中国象棋图标特殊样式 */
.gomoku-menu-item:hover .dynamic-icon {
  transform: rotate(-15deg) scale(1.1);
  color: #c62828;
}
</style>